<template>
  <div>
     <div class="box" ref="boxRef"></div>
  </div>
</template>
<!-- 
  选项式API操作DOM：(1)HTML元素中设置ref属性 (2)在js代码中通过this.$refs.ref属性值
  组合式API操作DOM的步骤
  1、在HTML元素上定义ref属性
  2、定义ref变量
  3、要在onMoutend生命周期的钩子中调用
 -->
<script lang='ts' setup>
import {ref,onMounted} from 'vue'
const boxRef=ref()
//这个就是页面加载并模板渲染完之后被调用
onMounted(()=>{
  console.log('boxRef',boxRef.value);
  (boxRef.value as HTMLElement).style.backgroundColor="orange"
})


</script>

<style lang='scss' scoped>
.box{
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 50%;
}
</style>